<template>
	<view class="user">
		<u-navbar title="个人中心" bgColor="#F7F9F9" :placeholder="true">
			<view class="title-left" slot="left"></view>
		</u-navbar>
		<view class="user-top" v-if="dwuUserinfo.id" @click="onJump('/pages/user/info')">
			<image class="profile" :src="dwuUserinfo.avatar" mode=""></image>
			<view class="info">
				<view class="name">
					{{dwuUserinfo.nickname}}
				</view>
				<view class="intro">
					<!-- 10年资深电工，专门维修C型充电桩、A型充电桩等。 -->
				</view>
			</view>

		</view>
		<view class="user-top" v-else @click="onJump('/pages/login/login')">
			<image class="profile" src="@/static/user/profile.png" mode=""></image>
			<view class="info">
				<view class="name">
					注册/登录
				</view>
				<view class="intro">
					登录后可体验更多服务
				</view>
			</view>
		</view>
		<view class="integral" @click="onJump('/subpackage/integral/integral')">
			<image class="jf-icon" src="@/static/user/jf_icon.png" mode=""></image>
			<text class="lable">积分余额</text>
			<text class="number">{{dwuUserinfo.score}}</text>
			<image class="arrow-right" src="@/static/user/arrow_right.png" mode=""></image>
		</view>
		<view class="orser-box">
			<view class="orser-title">
				我的发单
			</view>
			<view class="orser-list">
				<view class="orser-item" @click="onJump('/subpackage/order/publishList?type=1')">
					<image src="@/static/user/orser_icon1.png" mode=""></image>
					<text>待上门</text>
					<view class="number" v-if="djdcount" :class="djdcount.length > 2 ? 'number-more' : ''">
						<image v-if="djdcount.length > 2" src="@/static/news/num_bg2.png" mode=""></image>
						<image v-else src="@/static/news/num_bg1.png" mode=""></image>
						<text>{{djdcount.length > 2 ? '99+' : djdcount}}</text>
					</view>
				</view>
				<view class="orser-item" @click="onJump('/subpackage/order/publishList?type=2')">
					<image src="@/static/user/orser_icon2.png" mode=""></image>
					<text>服务中</text>
					<view class="number" v-if="fwzcount" :class="fwzcount.length > 2 ? 'number-more' : ''">
						<image v-if="fwzcount.length > 2" src="@/static/news/num_bg2.png" mode=""></image>
						<image v-else src="@/static/news/num_bg1.png" mode=""></image>
						<text>{{fwzcount.length > 2 ? '99+' : fwzcount}}</text>
					</view>
				</view>
				<view class="orser-item" @click="onJump('/subpackage/order/publishList?type=4')">
					<image src="@/static/user/orser_icon3.png" mode=""></image>
					<text>已完结</text>
					<view class="number" v-if="ywjcount" :class="ywjcount.length > 2 ? 'number-more' : ''">
						<image v-if="ywjcount.length > 2" src="@/static/news/num_bg2.png" mode=""></image>
						<image v-else src="@/static/news/num_bg1.png" mode=""></image>
						<text>{{ywjcount.length > 2 ? '99+' : ywjcount}}</text>
					</view>
				</view>
				<view class="orser-item" @click="onJump('/subpackage/order/publishList?type=3')">
					<image src="@/static/user/orser_icon4.png" mode=""></image>
					<text>待评价</text>
					<view class="number" v-if="dpjcount" :class="dpjcount.length > 2 ? 'number-more' : ''">
						<image v-if="dpjcount.length > 2" src="@/static/news/num_bg2.png" mode=""></image>
						<image v-else src="@/static/news/num_bg1.png" mode=""></image>
						<text>{{dpjcount.length > 2 ? '99+' : dpjcount}}</text>
					</view>
				</view>
			</view>
			<view class="orser-title">
				我的接单
			</view>
			<view class="orser-list">
				<view class="orser-item" @click="onJump('/subpackage/order/receiveList?type=1')">
					<image src="@/static/user/orser_icon1.png" mode=""></image>
					<text>待上门</text>
					<view class="number" v-if="dsmCount" :class="dsmCount.length > 2 ? 'number-more' : ''">
						<image v-if="dsmCount.length > 2" src="@/static/news/num_bg2.png" mode=""></image>
						<image v-else src="@/static/news/num_bg1.png" mode=""></image>
						<text>{{dsmCount.length > 2 ? '99+' : dsmCount}}</text>
					</view>
				</view>
				<view class="orser-item" @click="onJump('/subpackage/order/receiveList?type=2')">
					<image src="@/static/user/orser_icon2.png" mode=""></image>
					<text>服务中</text>
					<view class="number" v-if="fwzCount" :class="fwzCount.length > 2 ? 'number-more' : ''">
						<image v-if="fwzCount.length > 2" src="@/static/news/num_bg2.png" mode=""></image>
						<image v-else src="@/static/news/num_bg1.png" mode=""></image>
						<text>{{fwzCount.length > 2 ? '99+' : fwzCount}}</text>
					</view>
				</view>
				<view class="orser-item" @click="onJump('/subpackage/order/receiveList?type=4')">
					<image src="@/static/user/orser_icon3.png" mode=""></image>
					<text>已完结</text>
					<view class="number" v-if="ywjCount" :class="ywjCount.length > 2 ? 'number-more' : ''">
						<image v-if="ywjCount.length > 2" src="@/static/news/num_bg2.png" mode=""></image>
						<image v-else src="@/static/news/num_bg1.png" mode=""></image>
						<text>{{ywjCount.length > 2 ? '99+' : ywjCount}}</text>
					</view>
				</view>
			</view>
			<view class="orser-title">
				更多服务
			</view>
			<view class="orser-list">
				<view class="orser-item" @click="onJump('/subpackage/shop/shop')">
					<image src="@/static/user/more_icon1.png" mode=""></image>
					<text>配件商城</text>
				</view>
				<view class="orser-item" @click="onJump('/subpackage/certification/add')">
					<image src="@/static/user/more_icon2.png" mode=""></image>
					<text>资质认证</text>
				</view>
				<view class="orser-item" @click="onJump('/subpackage/score/score')">
					<image src="@/static/user/more_icon3.png" mode=""></image>
					<text>综合评分</text>
				</view>
				<view class="orser-item" @click="cooperation">
					<image src="@/static/user/more_icon4.png" mode=""></image>
					<text>商务合作</text>
				</view>
			</view>
			<view class="orser-list tab-list">
				<!-- <view class="tab-item" @click="onJump('/subpackage/address/address')">
					<view class="left">
						<image src="@/static/user/tab_icon1.png" mode=""></image>
						<text>地址管理</text>
					</view>
					<image class="right" src="@/static/user/arrow_right.png" mode=""></image>
				</view> -->
				<view class="tab-item" @click="onJump('/subpackage/feedback/feedback')">
					<view class="left">
						<image src="@/static/user/tab_icon2.png" mode=""></image>
						<text>意见反馈</text>
					</view>
					<image class="right" src="@/static/user/arrow_right.png" mode=""></image>
				</view>
				<view class="tab-item" @click="onJump('/subpackage/agreement/agreement?type=handbook')">
					<view class="left">
						<image src="@/static/user/tab_icon3.png" mode=""></image>
						<text>操作手册</text>
					</view>
					<image class="right" src="@/static/user/arrow_right.png" mode=""></image>
				</view>
				<view class="tab-item" @click="cooperation">
					<view class="left">
						<image src="@/static/user/tab_icon4.png" mode=""></image>
						<text>联系我们</text>
					</view>
					<image class="right" src="@/static/user/arrow_right.png" mode=""></image>
				</view>
			</view>
		</view>
		<dwu-modal ref="dwuModal"></dwu-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dwuUserinfo: {},
				djdcount: 0,
				fwzcount: 0,
				ywjcount: 0,
				dpjcount: 0,
				dsmCount: 0,
				fwzCount: 0,
				ywjCount: 0,
			};
		},
		onShow() {
			if (uni.getStorageSync('dwu_token')) {
				this.userInfo()
				this.orderCount()
			}
		},
		onLoad() {
			let dwuUserinfo = uni.getStorageSync('dwu_userinfo')
			this.dwuUserinfo = dwuUserinfo
		},
		methods: {
			orderCount() {
				this.request.http('/order/orderCount', 'post').then(res => {
					let data = res.data
					if (data.code == 1) {
						this.djdcount = data.data.djdcount
						this.fwzcount = data.data.fwzcount
						this.ywjcount = data.data.ywjcount
						this.dpjcount = data.data.dpjcount
					}
				})
				this.request.http('/sfuser/sfCount', 'post').then(res => {
					let data = res.data
					if (data.code == 1) {
						this.dsmCount = data.data.dsmCount
						this.fwzCount = data.data.fwzCount
						this.ywjCount = data.data.ywjCount
					}
				})
			},
			userInfo() {
				this.request.http('/user/userInfo', 'post').then(res => {
					let data = res.data
					if (data.code == 1) {
						this.dwuUserinfo = data.data
						uni.setStorageSync('dwu_userinfo', data.data)
					}
				})
			},
			onJump(url) {
				if (!uni.getStorageSync('dwu_token') && url !== '/pages/login/login') {
					this.$refs.dwuModal.open({
						content: '暂未登录',
						submitText: '去登录',
						success: (res) => {
							uni.navigateTo({
								url: '/pages/login/login'
							})
						}
					})
					return
				}
				uni.navigateTo({
					url
				})
			},
			cooperation() {
				this.$refs.dwuModal.open({
					content: '商务电话：15101010202',
					icon: false,
					title: "关于我们",
					textAlign: "center",
					submitText: '拨打电话',
					success: (res) => {
						uni.makePhoneCall({
							phoneNumber: '15101010202'
						})
					}
				})
			}
		}
	}
</script>

<style lang="less">
	page {
		background: #F7F9F9;
	}

	.user {
		padding-bottom: 40rpx;

		.user-top {
			padding: 38rpx 34rpx 18rpx 28rpx;
			display: flex;
			align-items: center;

			.profile {
				margin-right: 22rpx;
				width: 115rpx;
				height: 115rpx;
				background-color: #f2f2f2;
				border-radius: 50%;
			}

			.info {
				display: flex;
				// align-items: center;
				flex-direction: column;
				justify-content: center;

				.name {
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 31rpx;
					color: #313131;
					line-height: 42rpx;
				}

				.intro {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 23rpx;
					color: #999999;
					line-height: 33rpx;
				}
			}
		}

		.integral {
			padding-right: 48rpx;
			display: flex;
			align-items: center;
			justify-content: flex-end;

			.jf-icon {
				margin-right: 10rpx;
				width: 32rpx;
				height: 32rpx;
			}

			.lable {
				margin-right: 68px;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 21rpx;
				color: #666666;
			}

			.number {
				margin-right: 12rpx;
				font-family: DINAlternate, DINAlternate;
				font-weight: bold;
				font-size: 23rpx;
				color: #666666;
			}

			.arrow-right {
				width: 8rpx;
				height: 14rpx;
			}
		}

		.orser-box {
			padding: 0 22rpx;

			.orser-title {
				padding-left: 22rpx;
				margin-top: 42rpx;
				margin-bottom: 18rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 27rpx;
				color: #474747;
				line-height: 38rpx;
			}

			.orser-list {
				background: #FFFFFF;
				box-shadow: 0rpx 4rpx 13rpx 8rpx rgba(245, 245, 245, 0.16);
				border-radius: 35rpx;
				display: flex;
				align-items: center;
				// justify-content: space-between;

				.orser-item {
					position: relative;
					padding-top: 38rpx;
					padding-bottom: 30rpx;
					width: 25%;
					display: flex;
					align-items: center;
					flex-direction: column;
					justify-content: center;

					&>image {
						width: 42rpx;
						height: 44rpx;
					}

					&>text {
						margin-top: 12rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 21rpx;
						color: #666666;
						line-height: 31rpx;
					}

					.number {
						position: absolute;
						top: 22rpx;
						right: 24rpx;
						z-index: 11;
						width: 36rpx;
						height: 34rpx;
					
						&.number-more {
							width: 52rpx;
							height: 32rpx;
							right: 16rpx;
						}
					
						image {
							position: absolute;
							z-index: 1;
							width: 100%;
							height: 100%;
						}
					
						text {
							display: block;
							position: relative;
							z-index: 10;
							text-align: center;
							line-height: 34rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							font-size: 21rpx;
							color: #FFFFFF;
						}
					
					}
				}

				&.tab-list {
					margin-top: 36rpx;
					flex-direction: column;
					padding: 40rpx;

					.tab-item {
						margin-bottom: 40rpx;
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;

						&:last-child {
							margin-bottom: 0;
						}

						.left {
							image {
								width: 23rpx;
								height: 26rpx;
								margin-right: 16rpx;
							}

							text {
								font-family: PingFangSC, PingFang SC;
								font-weight: 500;
								font-size: 27rpx;
								color: #474747;
								line-height: 38rpx;
							}
						}

						.right {
							width: 12rpx;
							height: 22rpx;
						}

					}
				}
			}
		}
	}
</style>